<!-- 示例 》 图表 -->

<template>
  <EasyScroll full>
    <div v-for="[color] in DICT.COLOR" :key="color">
      <EasyCard v-bind="cardSix">
        <ChartLine v-bind="{ ...info.chart, [color]: true }" />
      </EasyCard>

      <EasyCard v-bind="cardSix">
        <ChartLine v-bind="{ ...info.chart, [color]: true }" area />
      </EasyCard>

      <EasyCard v-bind="cardSix">
        <ChartColumn v-bind="{ ...info.chart, [color]: true }" />
      </EasyCard>

      <EasyCard v-bind="cardSix">
        <ChartColumn v-bind="{ ...info.chart, [color]: true }" percent />
      </EasyCard>

      <EasyCard v-bind="cardSix">
        <ChartBar v-bind="{ ...info.chart, [color]: true }" />
      </EasyCard>

      <EasyCard v-bind="cardSix">
        <ChartBar v-bind="{ ...info.chart, [color]: true }" percent />
      </EasyCard>
    </div>

    <div>
      <EasyCard v-bind="cardThree">
        <ChartLineMulti v-bind="info.chartMulti" unit="个" />
      </EasyCard>

      <EasyCard v-bind="cardThree">
        <ChartColumnMulti v-bind="info.chartMulti" unit="个" :columnWidth="10" />
      </EasyCard>

      <EasyCard v-bind="cardThree">
        <ChartBarMulti v-bind="info.chartMulti" stack />
      </EasyCard>
    </div>

    <div>
      <EasyCard v-bind="cardThree">
        <ChartPie v-bind="info.chart" hasNum />
      </EasyCard>

      <EasyCard v-bind="cardThree">
        <ChartPie v-bind="info.chart" topLegend />
      </EasyCard>

      <EasyCard v-bind="cardThree">
        <ChartPie v-bind="info.chart" bottomLegend />
      </EasyCard>
    </div>
  </EasyScroll>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DemoChart',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store), CORE.mixLoop(), CORE.mixApiMenu()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 六分卡片
     */
    cardSix() {
      return {
        class: 'row3',
        sixth: true,
        noPadding: true,
      }
    },

    /**
     * 三分卡片
     */
    cardThree() {
      return {
        class: 'row4',
        third: true,
        noPadding: true,
      }
    },
  },
}
</script>
